<template>
  <fieldset>
    <legend>购物车cart</legend>
    <h1>购物车</h1>
    <ul>
      <li v-for="item in carts" :key="item.id">
        <b>产品名称：{{ item.title }}</b>
        ---------
        <b>数量：{{ item.count }}</b>
        &nbsp;
        <button @click="remove(item)" :key="item.id">移出购物车</button>
      </li>
    </ul>
    <h1>总价：{{ total }}</h1>
  </fieldset>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState("cart", ["carts"]),
    ...mapGetters("cart", ["total"]),
  },
  methods: {
    ...mapMutations("cart", ["REMOVE_CART"]),
    ...mapMutations("product", ["INCREASE_PRO"]),
    remove(item) {
      this.REMOVE_CART(item);
      this.INCREASE_PRO(item);
    },
  },
};
</script>
